<template>
    <!-- 规格选择 -->
    <div class="popup-container" @click="closePopup">
        <div class="spec-popup_box popup no-padding bottom" @click.stop>

            <div class="spec-content box_bg_gray">
                <div class="info-wrap clearfix">
                    <!-- 去掉.stop情况下有意外情况发生，暂时无解 -->
                    <i class="icon close-icon" @click.stop="closePopup">&#xe618;</i>
                </div>
                <div class="sku-container">
                    <div class="discount_title">优惠礼包</div>
                    <div class="pkg-discountBox" style="margin-bottom: 50rpx;">
                        <div class="discount_boxtip after-line discount_down_border">
                            合伙人、返利会员、员工推荐亲友团专享优惠
                        </div>
                        <div class="">
                            <div v-if="productDetail.length" class="pkg-discount__detail-list after-line">
                                <!-- @click="toSpecDetail(item,index)" -->
                                <div class="discount_lump" v-for="(item, index) in productDetail" :key="index" style="padding: 18rpx 20rpx;margin-bottom: 0rpx;">
                                    <div class="discount_lump_left" style="width: 96%;display: flex;">
                                        <div class="discount_give text-small" style="font-size: 24rpx;padding: 0rpx 11rpx;height: 34rpx;line-height: 38rpx;margin-top: 6rpx;">满减</div>
                                        <div class="pkg-discount__detail-item-name text-normal" style="width: 78%;font-size: 26rpx;margin-top: 6rpx;">{{item.title}}</div>
                                    </div>
                                    <!-- <div v-if="item.total_abatement" class="pkg-discount__detail-item-price pkg_discount_price_ri" style="height: 40rpx;margin-top: 2.5%;">￥{{item.total_abatement | currency}}</div> -->

                                    <div class="discount_lump_icon">
                                        <!-- <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon_active.png" style="margin-top:7rpx;" class="lump_icon_img" alt=""> -->
                                    </div>
                                </div>
                            </div>
                            <div class="pkg-discount__detail-list" v-if="discountDiscount.length > 0">
                                <!-- <div class="pkg-discount__detail-item">
                                    <div class="pkg-discount__detail-item-name text-normal">亲友团专享折扣</div>
                                </div> -->
                                <div v-for="(item2, i2) in discountDiscount" class="discount_lump" :key="'gift_content_' + i2" style="padding: 18rpx 20rpx;">
                                    <div class="discount_lump_left" style="display: flex;">
                                        <div class="discount_give text-small" style="font-size: 24rpx;padding: 0rpx 11rpx;height: 34rpx;line-height: 38rpx;margin-top: 6rpx;">折扣</div>
                                        <div class="discount__detail_title text-normal" style="width: 78%;font-size: 26rpx;margin-top: 6rpx;">{{item2.title}}</div>
                                    </div>
                                    <div class="pkg-discount__detail-item-price pkg_discount_price_ri" style="height: 40rpx;line-height: 19px;height: 38rpx;margin-top: 6rpx;" v-if="item2.total_abatement">￥{{item2.total_abatement | currency}}</div>
                                    <div class="pkg-discount__detail-item-price pkg_discount_price_ri" style="height: 40rpx;min-width: 15%;" v-else></div>
                                    <div class="discount_lump_icon">
                                        <!-- <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon_active.png" style="margin-top:7rpx;" class="lump_icon_img" alt=""> -->
                                    </div>
                                </div>
                            </div>
                            <div class="pkg-discount__detail-list">
                                <template v-for="(item, index) in discountDetail.gift">
                                    <!-- {{item}} -->
                                    <!-- <div :key="'gift_header_' + index" class="pkg-discount__detail-item">
                                        <div class="pkg-discount__detail-item-name text-normal">{{item.title}}</div>
                                    </div> -->
                                    <div v-for="(item, i) in item.content" class="discount_lump" style="padding: 18rpx 20rpx;" :key="'gift_content_' + index + '_' + i" @click="toSpecDetail(item,index)" > <!-- @click="toSpecDetail(item,index)" -->
                                        <div class="discount_lump_left" style="display: flex;">
                                            <div class="discount_give text-small" style="font-size: 24rpx;padding: 0rpx 11rpx;height: 34rpx;line-height: 38rpx;margin-top: 6rpx;">赠送</div>
                                            <div class="discount__detail_title text-normal" style="width: 78%;font-size: 26rpx;margin-top: 6rpx;">{{item.name}}</div>
                                        </div>
                                        <div class="pkg-discount__detail-item-price pkg_discount_price_ri" style="height: 40rpx;line-height: 19px;height: 38rpx;margin-top: 6rpx;">￥{{item.price | currency}}x{{item.number}}</div>
                                        <div class="discount_lump_icon">
                                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon_active.png" style="margin-top:7rpx;" class="lump_icon_img" alt="">
                                        </div>
                                    </div>
                                </template>
                            </div>
                            
                        </div>
                    </div>
                    <div class="okBtn" @click="closePopup">确定</div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    mapState,
} from 'vuex';
import {
    isUndef,
    formatPrice,
    makeMap,
    currency,
} from '@/lib/utils';
import Counter from '@/features/product/counter.vue';
import SpecManage from '@/lib/script/spec';
import store from '@/store';

export default {
    name: 'SpecPopupNew',
    components: {
        Counter,
    },
    props: {
        /** 数据详情 */
        productDetail: {
            type: Object,
        },
        discountDetail: {
            type: Object
        },
        discountDiscount: {
            type: Object
        },
        countVisible: {
            type: Boolean,
        },
    },
    data() {
        return {
            /** 管理对象 */
            manage: null,
            /** 购买数量控制 */
            mutableCount: 1,
            /** 当前选中的规格，可能是null */
            currentSpecification: null,
        };
    },
    computed: {
        
    },
    watch: {
        
    },
    methods: {
        /**
         * 关闭弹窗
         */
        closePopup() {
            this.$emit('close');
        },
        toSpecDetail(e){
            this.$emit('toSpecDetail',e)
        },
        
    },
    created() {
        
    },
    mounted() {
        
    }
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg_discount_price_ri{
    line-height: 72rpx;
    margin-right: 2%;
}
.box_bg_gray{
    background-color:#F6F6F6;
}
.spec-popup_box {
    height: 75%;
    padding: 0; // 重置popup的样式
    color: @color-font-1;
    box-sizing: border-box;
    &.no-padding {
        padding-bottom: 0;
    }
    .spec-content {
        position: relative;
        box-sizing: border-box;
        height: 100%;
        padding-bottom: 60px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        // overflow: scroll;
    }

    #spec-confirm-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .name {
        padding: 10px 15px;
        font-size: 14px;
        line-height: 20px;
        color: @color-font-1;
    }
    .desc {
        display: inline-block;
        min-width: 28px;
        margin: 10px 10px 0 0;
        padding: 5 16;
        font-size: 14px;
        border: 1px solid @primary-color;
        background: white;
        color: @primary-color;
        &[disabled] {
            border: 1px dashed #999999;
            background-color: #ffffff;
            color: #999999;
        }
    }
    .close-icon {
        position: absolute;
        display: inline-block;
        top: 17px;
        right: 17px;
        // padding, 5;
        font-size: 17px;
        color: black;
        z-index: 2;
    }
    .sku-container {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
// 新加
        .okBtn{
            position: absolute;
            bottom: 50rpx;
            left: 5%;
            width: 90%;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background-color: #F20517;
            border-radius: 50rpx;
            color: #fff;
            line-height: 70rpx;
        }
        .pkg-discountBox{
            width: 92%;
            margin: 0rpx auto;
        }
        .discount_title{
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 15px;
            color: #FF9C9C;
            text-align: center;
        }
        .discount_down_border{
            border-bottom: 1rpx solid #FEEBEC;
        }
        .discount_boxtip{
            padding: 15rpx 0rpx;
            font-size: 30rpx;
            color: #000000;
            margin-bottom: 10rpx;
        }
        .discount_lump{
            width: 100%;
            background-color: #ffffff;
            border-radius: 10rpx;
            display: flex;
            box-sizing: border-box;
            padding: 10rpx 20rpx;
            margin: 15rpx 0rpx;
        }
        .discount_lump_left{
            width: 80%;
        }
        .discount_lump_icon{
            width: 30rpx;
        }
        .lump_icon_img{
           width: 18rpx;
            margin-top: 70%;
        }
        .discount_give{
            padding: 2rpx 15rpx;
            display: inline-block;
            border: 1rpx solid #FF9C9C;
            color: #FF9C9C;
            border-radius: 100rpx;
        }
        .discount__detail_title{
            width: 100%;
            font-size: 28rpx;
            color: #000;
        }


    }
    .active {
        color: white;
        background: @primary-color;
    }

    .info-wrap {
        position: relative;
        padding: 20px 14px 0;
        .after-line-1 {
            margin: 20px 0 9px;
            box-sizing: border-box;
        }
    }

    // 每个spec行
    .spec-list-wrap {
        padding: 5px 10px;
        .name {
            padding: 0 5px 10px;
        }
    }
    .after-line-1 {
        border-bottom: 1px solid rgba(242, 242, 242, 1);
    }
    .spec-wrap {
        display: inline-block;
        padding: 5px 5px 9px;
    }
    .absolute-btn-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: @white-color;
        .price {
            flex: 1;
            padding-left: 15px;

            &__rebate {
                display: inline-block;
                padding: 1px 5px;
                margin-left: 5px;
                .text-normal();
            }
        }
    }
    .buy-num-tips {
        line-height: 26px;
    }
}
</style>
